Flex 4 TextFlow のアンカー装飾

たいが

2012.02.07

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

日々のお仕事シリーズ（仮称）

Flex 4 の RichEditableText コンポーネントは、内部で TLF(Text Layout Framework) を使用しています。

そして、この TLF では、テキストコンテンツを管理する役割を果たす TextFlow というクラスのオブジェクトを使用して、文字装飾を実現しますが、あまり使う機会がないためか、お作法を都度忘れてしまうので ( 特にアンカーの装飾 )、サンプルコードを残しておくことにしました。

実装コード (Main.mxml)

<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx = "http://ns.adobe.com/mxml/2009"
xmlns:s  = "library://ns.adobe.com/flex/spark"
>
<fx:Script>
<![CDATA[
    import flashx.textLayout.events.FlowElementMouseEvent;
    import flashx.textLayout.formats.TextLayoutFormat;
    protected var linkNormalFormat :TextLayoutFormat;
    protected var linkHoverFormat  :TextLayoutFormat;
    protected var linkActiveFormat :TextLayoutFormat;
    protected override function createChildren():void {
        super.createChildren();
        tf.addEventListener("任意の文字列", anchorClickHandler);

        linkNormalFormat = new TextLayoutFormat();
        linkNormalFormat.color = 0x990000;
        linkNormalFormat.textDecoration = "none";

        linkHoverFormat  = new TextLayoutFormat();
        linkHoverFormat.color = 0xcc0000;
        linkHoverFormat.textDecoration = "underline";

        linkActiveFormat = new TextLayoutFormat();
        linkActiveFormat.color = 0x000099;

        tf.linkNormalFormat = linkNormalFormat;
        tf.linkHoverFormat  = linkHoverFormat;
        tf.linkActiveFormat = linkActiveFormat;
    }
    protected function anchorClickHandler(event:FlowElementMouseEvent):void {
        ta.appendText(event.flowElement.getText() + "\n");
    }
]]>
</fx:Script>

<s:VGroup width="50%" height="50%" verticalCenter="0" horizontalCenter="0">
    <s:RichEditableText id="ret" fontSize="40" editable="false" selectable="false" width="100%" height="100%">
        <s:textFlow>
            <s:TextFlow id="tf">
                <s:p><s:a href="event:任意の文字列">たいが</s:a>さん、困っ<s:a href="event:任意の文字列">taiga</s:a></s:p>
            </s:TextFlow>
        </s:textFlow>
    </s:RichEditableText>
    <s:TextArea id="ta" width="100%" height="100%" />
</s:VGroup>

</s:Application>